<template>
	<view>
		<view class="content">
			<view class="list">
				<view class="row">
					<view class="title">头像</view>
					<view class="right" @click="updateImage()">
						<view class="tis">
							<image :src="img" mode="widthFix"></image>
						</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">昵称</view>
					<view class="right">
						<view class="tis">{{ username }}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">真实性名</view>
					<view class="right">
						<view class="tis">{{ reallyName }}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">个性签名</view>
					<view class="right">
						<view class="tis">这人太懒了，什么都不写</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">班级</view>
					<view class="right">
						<view class="tis">{{classx}} </view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">学号</view>
					<view class="right">
						<view class="tis">{{ studnetCode }}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">联系方式</view>
					<view class="right">
						<view class="tis">{{mobile}}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="row">
					<view class="title">学习时长</view>
					<view class="right">
						<view class="tis">{{studyTime}} 分钟</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">积分</view>
					<view class="right">
						<view class="tis">{{totalIntegral}}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">会员等级</view>
					<view class="right">
						<view class="tis">{{rankName}}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">我的反馈</view>
					<view class="right">
						<view class="tis">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="row" @click="forget()">
					<view class="title">修改密码</view>
					<view class="right">
						<view class="tis">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">版本号</view>
					<view class="right">
						<view class="tis">v1.0.0</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
		</view>
		<button class="btn-logout" @click="login">退出登录</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				username: '', //用户名
				mobile: '', //手机号
				rankName: '', //勋章号
				reallyName: '', //真实姓名
				studnetCode: '', //学号1
				img: '', //头像
				classx: '', //班级
				studyTime: '', //学习时间
				totalIntegral: '' //积分
			};
		},
		methods: {
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.list = this.orderList[tbIndex];
			},
			login() {
				
				uni.removeStorageSync('token')
				
				this.$store.dispatch('clearislogin')
			
				
				uni.navigateTo({
					url: '/pages/user/login/login'
				});
			},
			forget() {
				uni.navigateTo({
					url: '/pages/user/forgot/forgot'
				});
			},
			updateImage() {
				// console.log('hello');
				uni.navigateTo({
					url: '/pages/user/forgot/avatar'
				});
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			uni.$u.http
				.get('/app/home/userInfo')
				.then(res => {
					console.log(res.data);
					this.img = res.data.imageUrl
					this.username = res.data.username;
					this.classx = res.data.classx;
					this.reallyName = res.data.reallyName;
					this.studnetCode = res.data.studnetCode;
					this.mobile = res.data.mobile;
					this.studyTime = res.data.studyTime;
					this.totalIntegral = res.data.totalIntegral;
					this.rankName = res.data.rankName;
				})
				.catch(() => {});
			// console.log(this.userinfo);
			// this.username = this.userinfo.username;
			// this.mobile = this.userinfo.mobile;
			// this.RankName = this.userinfo.RankName;
			// this.reallyName = this.userinfo.reallyName;
			// this.ranks = this.userinfo.ranks;
			// this.studnetCode = this.userinfo.studnetCode;
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.btn-logout-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}

	.icon {
		font-size: 30upx;
	}

	.content {
		padding-bottom: 20upx;

		.list {
			width: 96%;
			padding-left: 4%;
			background-color: #fff;
			margin-bottom: 20upx;

			.row {
				widows: 100%;
				min-height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 1upx #eee;

				&:last-child {
					border-bottom: none;
				}

				.title {
					font-size: 32upx;
					color: #333;
				}

				.right {
					display: flex;
					align-items: center;
					color: #999;

					.tis {
						font-size: 32upx;
						margin-right: 5upx;
						max-height: 120upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.icon {
						width: 40upx;
						color: #cecece;
					}
				}
			}
		}
	}

	.btn-logout {
		margin-top: 30upx;
		width: 80%;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #365fff, #36bbff);
	}
</style>

<!-- <template>
	<view>
		<cmd-nav-bar back title="信息设置"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-cel-item title="头像" slot-right arrow @click="updateImage()"><cmd-avatar :src="urls"></cmd-avatar></cmd-cel-item>
					<cmd-cel-item title="积分" addon="566" arrow>566</cmd-cel-item>
					<cmd-cel-item title="昵称" addon="username" arrow></cmd-cel-item>
					<cmd-cel-item title="姓名" addon="仙女" arrow></cmd-cel-item>
					<cmd-cel-item title="班级" addon="B200106" arrow></cmd-cel-item>
					<cmd-cel-item title="学号" addon="22222222" arrow></cmd-cel-item>
					<cmd-cel-item title="联系方式" addon="15676109501" arrow></cmd-cel-item>
					<cmd-cel-item title="证件号码" addon="450112xxxxxxxx2017" arrow></cmd-cel-item>
					<cmd-cel-item title="我的地址" addon="江西软件职业技术大学" arrow></cmd-cel-item>
					<cmd-cel-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cel-item>
					<button class="btn-logout" @click="login">退出登录</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
import cmdCelItem from '@/components/cmd-cell-item/cmd-cell-item.vue';
import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';
import { mapState } from 'vuex';

export default {
	data() {
		return {
			username:''
		};
	},
	components: {
		cmdNavBar,
		cmdPageBody,
		cmdTransition,
		cmdCelItem,
		cmdAvatar
	},
	computed: {
		...mapState(['userinfo'])
	},
	onLoad() {
		console.log(this.userinfo);
		this.username = this.userinfo.username;
		console.log(this.username);
	},
	data() {
		return {
			urls: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/banyao.jpg'
		};
	},

	mounted() {},

	methods: {
		/**
		 * 点击触发
		 * @param {Object} type 跳转页面名或者类型方式
		 */
		fnClick(type) {
			if (type == 'modify') {
				uni.navigateTo({
					url: '/pages/user/modify/modify'
				});
			}
		},
		login() {
			uni.navigateTo({
				url: '/pages/user/login/login'
			});
		},
		updateImage() {
			console.log('hello');
			uni.navigateTo({
				url: '/pages/user/forgot/avatar'
			});
		}
	}
};
</script>

<style>
.btn-logout {
	margin-top: 100upx;
	width: 80%;
	border-radius: 50upx;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(to right, #365fff, #36bbff);
}

.btn-logout-hover {
	background: linear-gradient(to right, #365fdd, #36bbfa);
}
</style>
 -->
